/**
 * 装车控制 - 屏幕参数设置 - 弹窗
 * @author xiaoxujs
 */

import { FC, useEffect, useState } from "react";
import { IIYckzZyLoadControlParamSetSetScreenVO, IYckzZyLoadControlParamSet } from "../../../../../type/remoteControl/loadingControlList";
import { Col, Form, Input, InputNumber, message, Modal, Radio, Row } from "antd";
import { postYckzZyLoadControlScreenParamSet } from "../../../api";
import { XianshimoshiBox } from "../../style";


const ScreenParamsSetModule: FC<{
    open: boolean,
    handleSetCallback: () => void;
    clickData?: IYckzZyLoadControlParamSet,
    clickId?: string;
}> = ({
    open,
    handleSetCallback,
    clickData,
    clickId
}) => {

        const [form] = Form.useForm<IIYckzZyLoadControlParamSetSetScreenVO>();
        const screenTypeValue = Form.useWatch('screenType', form);

        const [loading, setLoading] = useState(false);

        useEffect(() => {
            if (clickData) {
                form.setFieldsValue(clickData.setScreenVO)
            }
        }, [clickData, form])
        const handleOk = async () => {
            const values = await form.validateFields();
            if (clickData && clickId) {
                setLoading(true);
                let arr = [values.identify, values.deal, values.margin, values.advertisement]
                arr = Array.from(new Set(arr))
                console.log(arr)
                if (arr.length > 3) {
                    const { code, msg } = await postYckzZyLoadControlScreenParamSet({
                        ...values,
                        screenId: clickData.setScreenVO.screenId,
                        id: clickId
                    }) as { code: number; msg: string };
                    if (code === 20000) {
                        form.resetFields();
                        handleSetCallback();
                    } else {
                        message.error(msg)
                    }
                }else{
                    message.error('显示模式填写有误请重新填写！')
                }
                setLoading(false)

            }

        };

        const handleCancel = () => {
            handleSetCallback();
        };
        return <Modal title="设置屏幕参数" confirmLoading={loading} open={open} onOk={handleOk} onCancel={handleCancel}>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ screenType: 0 }}
                form={form}
            >
                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="IP地址"
                    name="screenIp"
                    rules={[{ required: true, message: '请输入IP地址!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="端口号"
                    name="screenPort"
                    rules={[{ required: true, message: '请输入端口号!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="用户名"
                    name="screenUser"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="密码"
                    name="screenPassword"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="显示模式"
                    name="screenType"
                    rules={[{ required: true, message: '请选择显示模式!' }]}
                >
                    <Radio.Group >
                        <Radio value={0}>单行</Radio>
                        <Radio value={1}>多行</Radio>
                    </Radio.Group>

                </Form.Item>

                <Row>
                    <Col span={6}>
                    </Col>
                    <Col span={18}>
                        <XianshimoshiBox>
                            {
                                screenTypeValue === 0 && <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                                    label="识别结果位"
                                    name="identify"
                                >
                                    <InputNumber style={{ width: '100%' }} min={0} max={9} />
                                </Form.Item>
                            }
                            {
                                screenTypeValue === 1 && <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                                    label="识别结果位"
                                    name="identify"
                                >
                                    <InputNumber style={{ width: '100%' }} min={0} max={9} />
                                </Form.Item>
                            }
                            {
                                screenTypeValue === 1 && <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                                    label="处理结果位"
                                    name="deal"
                                >
                                    <InputNumber style={{ width: '100%' }} min={0} max={9} />
                                </Form.Item>
                            }
                            {
                                screenTypeValue === 1 && <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                                    label="余量位"
                                    name="margin"
                                >
                                    <InputNumber style={{ width: '100%' }} min={0} max={9} />
                                </Form.Item>
                            }
                            {
                                screenTypeValue === 1 && <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                                    label="广告位"
                                    name="advertisement"
                                >
                                    <InputNumber style={{ width: '100%' }} min={0} max={9} />
                                </Form.Item>
                            }
                        </XianshimoshiBox>
                    </Col>
                </Row>




                <Form.Item<IIYckzZyLoadControlParamSetSetScreenVO>
                    label="设备品牌(字符卡)"
                    name="screenBrand"
                    rules={[{ required: true, message: '请选择设备品牌!' }]}
                >
                    <Radio.Group >
                        <Radio value='中航单色'>中航单色</Radio>
                        <Radio value='中航全彩'>中航全彩</Radio>
                    </Radio.Group>
                </Form.Item>

            </Form>
        </Modal>
    }

export default ScreenParamsSetModule;